<template>
   <div class="common-layout">
        <el-container>
            <el-header style="margin:0 auto">
               <Headerbanner/>
            </el-header>
            <el-main style="margin:0 auto">
                <div class="mainer">
               <RouterView/>
                </div>
            </el-main>
            <FootrL/>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import FooterL from './footer/footer.vue';
import Headerbanner from './headerbanner/headerbanner.vue';

</script>


<style scoped>
.carousel{
    width: 1200px;
    margin: 0 auto;
}
/deep/ .el-carousel__indicator--horizontal .el-carousel__button {
    width: 12px;
    height: 12px;
    margin: 12px 4px;
    background: transparent;
    border: 1px solid #ffffff;
    border-radius: 50%;
    opacity: 0.5;
  }  
  /deep/ .el-carousel__indicator--horizontal.is-active .el-carousel__button{
    width: 12px;
    height: 12px;
    margin: 12px 4px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 1;
  }
img{
    width: 1200px;
    height: 466px;
}
.one-line{
  

}
.our,.private,.server,.accociate{ 
    width: 19.094px;
    height:276px;
    color: #B1B5C1;
    
}
.our{
    padding:0 100px 14px 210px;
    font-size:14px;
    color: #B1B5C1;
}
.private{
    padding:0 90px 0px;
    font-size:14px;
    color: #B1B5C1;
}
.server{
    padding:0 90px 0px;
    font-size:14px;
    color: #B1B5C1;
}
.accociate{
    padding:0 90px;
    font-size:14px;
    color: #B1B5C1;

}
/* 阿里矢量图标 */
svg{
    width: 24px;
    height: 26px;
    margin:0  82px;
    fill:#B1B5C1;
   
}
.svgpic{
    padding: 28px 455px ;
    overflow: hidden;
   

}
.ICP{
    text-align: center;
    color: #B1B5C1;
}
.premission{
    text-align: center;
    color: #B1B5C1;
}
.web{
    text-align: center;
    color: #B1B5C1;
}
.copyright{
    text-align: center;
    color: #B1B5C1;
}
.footer{
    background-color: #221f23;
}

.putcenter{
    padding: 0 auto;
}
.mainer{
    width: 1200px;
}
</style>
